<template>
  <div class="line">
    <div class="main" ref="main">
    </div>
  </div>
</template>
<script>
const echarts = require('echarts/lib/echarts') // 引入echarts
require('echarts/lib/chart/bar') // 引入柱状图
// 引入提示框和标题组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
export default {
  data () {
    return {
      title: {
        text1: '柱状图',
        x: 'left',
        y: 'top',
        fontFamily: 'Courier New',
        fontSize: 20,
        color: '#000'
      },
      histogramLegend: {
        backgroundColor: '#d2dde6',
        radius: 0,
        postColosr: '#3ea915',
        labColor: '#000000',
        labSize: 10
      },
      xData: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      yData: [5, 2, 3, 4, 10, 20]
    }
  },
  mounted () {
    this.initEcharts()
  },
  methods: {
    initEcharts () {
      // const THIS = this
      const mainDiv = this.$refs.main // 找到绘制的区域,强烈推荐使用refs
      const myChart = echarts.init(mainDiv) // 初始化
      myChart.setOption({ // 官网例子
        backgroundColor: this.histogramLegend.backgroundColor,
        title: {
          text: this.title.text1,
          x: this.title.x, // 标题横向位置//////////////////////////////////// 增
          y: this.title.y, // 标题纵向位置//////////////////////////////////// 增
          textStyle: {
            fontFamily: this.title.fontFamily,
            fontSize: this.title.fontSize,
            color: this.title.color
          }
        },
        tooltip: {},
        xAxis: {
          data: this.xData,
          axisLabel: {
            color: this.histogramLegend.labColor, // 刻度标签
            fontSize: this.histogramLegend.labSize
          }
        },
        yAxis: {
          axisLabel: {
            color: this.histogramLegend.labColor, // 刻度标签
            fontSize: this.histogramLegend.labSize
          }
        },
        series: [{
          name: '待写',
          type: 'bar',
          data: this.yData,
          itemStyle: {
            barBorderRadius: this.histogramLegend.radius,
            color: this.histogramLegend.postColosr
          }
        }]
      })
    }
  }

}
</script>
<style lang="scss" scoped>
  .line{
    .main {
      width: 540px;
      height: 300px;
    }
  }
</style>
